<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-04-02 16:28:42
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-08-07 17:12:37
 * @FilePath: my.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <div class="home my">
    <div class="top">
      <div class="left">
        <van-image class="avatar" round :src="userData.avatar" />
        <div class="username">{{ name || "掌心用户" }}</div>
        <van-image
          v-if="userData.isVip"
          class="vip_icon"
          :src="require('@/assets/icon/my/vip.png')"
        />
      </div>
      <div class="right">
        <van-icon name="setting" @click="setting" />
      </div>
    </div>
    <div class="order">
      <div class="title">
        <div class="order_text_1">我的订单</div>
        <div class="order_text_2" @click="goToOrder(-1)">全部订单></div>
      </div>
      <div class="order_item">
        <van-grid :column-num="4" :border="false">
          <van-grid-item
            v-for="(v, i) in orderList"
            :key="i"
            @click="goToOrder(v.id)"
          >
            <template #text>
              <span class="order_item_title">{{ v.title }}</span>
            </template>
            <template #icon>
              <van-image
                class="vip_icon"
                :src="require(`@/assets/icon/my/${v.icon}.png`)"
              />
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div v-if="!hasCar" class="car">
      <div class="car_title">我的爱车</div>
      <div class="add_btn" @click="addCar">+添加爱车 享专属服务</div>
    </div>

    <div class="car_box">
      <div class="car_title">我的爱车</div>
      <div v-if="hasCar" class="car_2">
        <div class="left">
          <div class="car_icon">
            <van-image
              width="100%"
              height="100%"
              :src="require('../assets/icon/my/car.png')"
            />
          </div>
          <span class="car_name">{{ carInfo.brand }}</span>
        </div>
        <div class="right" @click="showCarList = true">
          <span class="text_2" :style="{ color: '#989898' }">车辆管家></span>
        </div>
      </div>
    </div>

    <div class="more">
      <div class="more_title">更多服务</div>
      <div class="more_grid">
        <van-grid :column-num="3" :border="false">
          <van-grid-item text="联系客服" to="/customer">
            <template #icon>
              <van-image
                class="grid_icon"
                :src="require('@/assets/icon/my/customer.png')"
              />
            </template>
          </van-grid-item>
          <van-grid-item text="我的维权" to="/myWeiquan">
            <template #icon>
              <van-image
                class="grid_icon"
                :src="require('@/assets/icon/my/weiquan.png')"
              />
            </template>
          </van-grid-item>
          <van-grid-item text="我的券包" to="/coupon">
            <template #icon>
              <van-image
                class="grid_icon"
                :src="require('@/assets/icon/my/qb.jpg')"
              />
            </template>
          </van-grid-item>
          <!-- <van-grid-item text="监控" to="/audio">
            <template #icon>
              <van-image
                class="grid_icon"
                :src="require('@/assets/icon/my/qb.jpg')"
              />
            </template>
          </van-grid-item> -->
          <!-- <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" /> -->
        </van-grid>
      </div>
    </div>
    <van-action-sheet
      v-model="showCarList"
      get-container=".my"
      title="更换车辆"
      :closeable="false"
    >
      <div class="content">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-swipe-cell
              v-for="(v, i) in carList"
              :key="i"
              :before-close="beforeClose"
            >
              <van-cell @click="selectCar(v, i)">
                <template #title>
                  <div class="title_cell">
                    <van-radio :name="i" />
                    <span class="car_name_2">{{ v.brand }}</span>
                  </div>
                </template>
                <template #right-icon>
                  <van-icon name="edit" @click.stop="editCar(v, i)" />
                </template>
              </van-cell>
              <template #right>
                <van-button
                  square
                  text="删除"
                  type="danger"
                  @click="delCar(v, i)"
                />
              </template>
            </van-swipe-cell>
          </van-cell-group>
        </van-radio-group>
        <van-empty v-if="carList.length == 0" description="暂无车辆" />
        <div class="add_btn">
          <van-button icon="plus" type="info" block round @click="addCar"
            >添加车型</van-button
          >
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { mapGetters } from "vuex";
import api from "@/api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "my",
  components: {},
  data() {
    //这里存放数据
    return {
      orderList: [
        {
          title: "待付款",
          icon: "dfk",
          id: 0,
        },
        {
          title: "待服务",
          icon: "dpj",
          id: 31,
        },
        {
          title: "已完成",
          icon: "ywc",
          id: 100,
        },
        {
          title: "退款/售后",
          icon: "sh",
          id: 4,
        },
      ],
      hasCar: false,
      carInfo: {},
      showCarList: false,
      radio: 0,
      deleteIndex: -1,
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters(["userData", "carList", "currentCarIndex"]),
    name() {
      return this.userData.userName
        ? this.userData.userName[0] +
            "*".repeat(Math.max(this.userData.userName.length - 1, 0))
        : "";
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    addCar() {
      this.$router.push({
        path: "/addCar",
      });
    },
    goToOrder(id) {
      this.$router.push({
        path: "/order",
        query: {
          id,
        },
      });
    },
    setting() {
      this.$router.push({
        path: "/setting",
      });
    },
    selectCar(item, i) {
      this.carInfo = this.carList.find((v) => v.id == item.id);
      this.$store.commit("common/SET_CURRENT_CAR_INDEX", i);
      this.showCarList = false;
    },
    editCar(item, i) {
      this.$router.push({
        path: "/addCar",
        query: {
          id: item.id,
          type: "edit",
        },
      });
    },
    delCar(item, i) {
      this.deleteIndex = { item, i };
      console.log(this.deleteIndex);
    },
    addCar() {
      this.$router.push({
        path: "/addCar",
      });
    },
    beforeClose({ position, instance }) {
      let _this = this;
      if (position == "right") {
        Dialog.confirm({
          message: "确定删除吗?",
        }).then(async function () {
          await api.delCarInfo({ id: _this.deleteIndex.item.id });
          let res2 = await api.getCarList({});
          _this.$store.commit("user/SET_CAR", res2.data);
          if (_this.carList.length == 0) {
            _this.hasCar = false;
            _this.carInfo = {};
            _this.$store.commit("common/SET_CURRENT_CAR_INDEX", -1);
          }
          if (_this.currentCarIndex == _this.deleteIndex.id) {
            if (_this.carList.length > 0) {
              _this.$store.commit("common/SET_CURRENT_CAR_INDEX", 0);
              _this.carInfo = _this.carList[0];
              _this.radio = 0;
            }
          }
          instance.close();
          // _this.showCarList = false
        });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    if (this.carList.length) {
      this.hasCar = true;
      this.carInfo = this.carList[this.currentCarIndex];
    }
    this.radio = Number(this.currentCarIndex);
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
    no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  padding: 100px 50px 150px 50px;
  background-color: #fff;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .avatar {
        width: 130px !important;
        height: 130px !important;
      }

      .username {
        font-size: 52px;
        color: #fff;
        margin: 0 30px;
        font-weight: bold;
      }

      .vip_icon {
        width: 61px;
        height: 49px;
      }
    }

    .right {
      font-size: 60px;
      color: #fff;
    }
  }

  .order {
    padding: 40px 50px;
    background: #fff;
    border-radius: 30px;
    margin-top: 25px;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .order_text_1 {
        font-size: 50px;
      }

      .order_text_2 {
        font-size: 38px;
        color: #909090;
      }
    }

    .order_item {
      .order_item_title {
        font-size: 40px;
        color: #666666;
      }

      .vip_icon {
        min-width: 122px;
        max-width: 122px;
      }
    }
  }

  .car {
    margin-top: 35px;
    padding: 40px 50px;
    background: #fff;
    border-radius: 30px;

    &_title {
      font-size: 50px;
      font-weight: bold;
    }

    .add_btn {
      margin-top: 30px;
      padding: 25px 30%;
      border-radius: 999px;
      font-size: 36px;
      background: linear-gradient(to right, #4f9df5, #f1f6fd, #bfdbfa);
    }
  }

  .car_box {
    margin-top: 40px;
    padding: 20px 40px;
    background: #fff;
    border-radius: 15px;
    font-size: 50px;

    .car_title {
      font-size: 50px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .car_2 {
      width: 100%;
      display: flex;
      height: 120px;
      border-radius: 10px;
      align-items: center;
      background: linear-gradient(to right, #dce8ff, #abc8ff);
      padding: 0 40px;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .car_icon {
          min-width: 112px;
          max-width: 112px;
          height: 76px;
        }
        .car_name {
          margin-left: 40px;
          font-size: 40px;
          color: #000;
        }
      }
      .text_2 {
        font-size: 40px;
      }
    }
  }

  .more {
    margin-top: 35px;
    padding: 40px 50px;
    background: #fff;
    border-radius: 30px;

    .more_title {
      font-size: 50px;
      font-weight: bold;
    }

    .more_grid {
      margin-top: 30px;

      .grid_icon {
        width: 100px;
        height: 100px;
      }
    }
  }
  .content {
    padding: 30px;
    .title_cell {
      display: flex;
      align-items: center;
      .car_name_2 {
        margin: 0 60px;
      }
    }
    /deep/ .van-icon {
      display: flex;
      align-items: center;
    }
    /deep/ .van-swipe-cell__right {
      display: flex;
    }

    .add_btn {
      width: 100%;
      padding: 80px 50px 40px 50px;
    }
  }
}
</style>
